<template>
	<div class="homepage">
		<header>
			<el-carousel arrow="never" trigger="hover" :interval="3000" >				
				<el-carousel-item v-for="(item,index) in 4" :key="index">
					<img class="img1" v-if="index===0" src="../../assets/images/abao/i1elements.png">
					<img class="img2" v-if="index===1" src="../../assets/images/abao/i2elements.png">
					<img class="img3" v-if="index===2" src="../../assets/images/abao/i3elements.png">
					<img class="img4" v-if="index===3" src="../../assets/images/abao/i4elements.png">
				</el-carousel-item>
			</el-carousel>
			<div class="logins">
				<div class="login">
					<div class="login_text">登录</div>
					<div class="login_inputs">
						<div class="input1">
							<img class="people" src="../../assets/images/abao/people_fill.png">
							<input :class="{red1: isRed1}" type="text" v-model.trim="input1" placeholder="阿宝号/邮箱/手机号">
							<img v-if="input1!=''" @click="close" class="close" src="../../assets/images/abao/close.png">
						</div>
						<div class="input2 input1" @keydown="login">
							<img class="people" src="../../assets/images/abao/lock.png">
							<input :class="{red1: isRed2}" type="password" v-model.trim="input2" placeholder="密码">
						</div>
					</div>
					<div class="login_options" @keydown="login">
						<el-checkbox v-model="checked">记住账号</el-checkbox>
						<p>忘记账号或密码</p>
					</div>
					<div class="login_buttons">
						<button @click="goLogin" @keydown="login">登&thinsp;陆</button>
						<button @click="goRegister">立即注册</button>
					</div>
				</div>
			</div>
		</header>
		<div class="content">
			<div class="content_box">
				<div class="abo_introduce">
					<h1>什么是阿宝应用号</h1>
					<h6>阿宝应用号是一款集展示、互动、交易为一体，可一站式解决各种推广诉求并为商户带来更多精准客流的营销神器。用户无需安装，无需开发，即点即用，节省流量。</h6>
					<div>
						<img src="../../assets/images/abao/im1.png" alt="" />
						<img src="../../assets/images/abao/im2.png" alt="" />
						<img src="../../assets/images/abao/im3.png" alt="" />
					</div>
				</div>
				<div class="ranges">
					<h1>适用范围</h1>
					<h6>电商,餐饮,零售,媒体,旅游,教育,房产...</h6>
					<div>
						<p>
							<img src="../../assets/images/abao/p2im1.jpg" alt="" />
							<span>商户</span>
						</p>						
						<p>
							<img src="../../assets/images/abao/p2im2.jpg" alt="" />
							<span>个人</span>
						</p>
						<p>
							<img src="../../assets/images/abao/p2im3.jpg" alt="" />
							<span>企业</span>
						</p>
						<p>
							<img src="../../assets/images/abao/p2im4.jpg" alt="" />
							<span>政府</span>
						</p>
						<p>
							<img src="../../assets/images/abao/p2im5.jpg" alt="" />
							<span>媒体</span>
						</p>
					</div>
				</div>
				<div class="process">
					<h1>接入流程</h1>
					<h6>小程序是一种新的开放能力，开发者可以快速开发</h6>
					<div>
						<p>
							<img class="p1" src="../../assets/images/abao/p1.jpg" alt="" />
							<span>一键注册</span>
						</p>						
						<p>
							<img src="../../assets/images/abao/p2.jpg" alt="" />
							<span>开通应用号</span>
						</p>
						<p>
							<img src="../../assets/images/abao/p3.jpg" alt="" />
							<span>审核与发布</span>
						</p>						
					</div>
				</div>
				<h2>功能简介</h2>
				<div class="functions">
					<div class="function1">
						<p>覆盖全行业，功能丰富，开通即用，适用各种消费场景。</p>
					</div>
					<div class="function2">
						<p>可视化编辑，轻松个性制作，无需开发，快速简单，你也行！</p>
					</div>
					<div class="function3">
						<p>精准的定向能力，多种推广形式。轻松玩转营销。</p>
					</div>
				</div>
			</div>	
			<div class="activity">
				<h3>活动期间</h3>
				<h1>开通立享4大补贴</h1>
				<img src="../../assets/images/abao/bottomImg.jpg" alt="" />
			</div>
			<div class="four_subsidy">
				<div class="subsidy1">
					<div class="text">
						<h6>应用号所有功能免费</h6>
						<p>免费开通百种营销场景全行业覆盖</p>
					</div>					
				</div>
				<div class="subsidy2">
					<div class="text">
						<h6>现金补贴推广应用号</h6>
						<p>百万现金周周送，推荐新用户注册使用阿宝应用号，即可获得现金补贴。</p>
					</div>
				</div>
				<div class="subsidy3">
					<div class="text">
						<h6>各种交易功能免费用</h6>
						<p>商家使用团购、商城、点餐、外卖、会员、门店收银、预约、预定等功能不扣点</p>
					</div>
				</div>
				<div class="subsidy4">
				<div class="text">
						<h6>现金支持应用号创业</h6>
						<p>0门槛平台创业，不仅有运营流量支持，更有现金支持，创业必成。</p>
					</div></div>
			</div>
			<div class="abao_info">
				<img class="backg" src="../../assets/images/abao/background.jpg" alt="" />
				<div class="details">
					<div class="left">
						<img src="../../assets/images/abao/p6title.png" alt="" />
						<button>查看详情<span></span></button>
					</div>
					<img src="../../assets/images/abao/p6image.png" alt="" />
				</div>
			</div>
			<div class="all_users">
				<h6>他们都在使用阿宝应用号</h6>
				<div class="icons">
					<img src="../../assets/images/abao/p7i1.jpg" alt="" />
					<img src="../../assets/images/abao/p7i2.jpg" alt="" />
					<img src="../../assets/images/abao/p7i3.jpg" alt="" />
					<img src="../../assets/images/abao/p7i4.jpg" alt="" />
					<img src="../../assets/images/abao/p7i5.jpg" alt="" />
					<img src="../../assets/images/abao/p7i6.jpg" alt="" />
					<img src="../../assets/images/abao/p7i7.jpg" alt="" />
					<img src="../../assets/images/abao/p7i8.jpg" alt="" />
					<img src="../../assets/images/abao/p7i9.jpg" alt="" />
				</div>
				<div class="imgs">
					<img src="../../assets/images/abao/scst1.jpg" alt="" />
					<img src="../../assets/images/abao/scst2.jpg" alt="" />
					<img src="../../assets/images/abao/scst3.jpg" alt="" />
					<img src="../../assets/images/abao/scst4.jpg" alt="" />
				</div>
			</div>
			<div class="footer">
				<h5>Power By 木丰众易 Copyright @ 2008-2018 All right Reserved</h5>
			</div>
		</div>
		<div class="selects">
			<div style="height: 300px;">
			  <el-steps direction="vertical" :active="steps">			  	
			    <el-step @click.native="jump(1)" title=""></el-step>
			    <el-step @click.native="jump(2)" title=""></el-step>
			    <el-step @click.native="jump(3)" title=""></el-step>
			    <el-step @click.native="jump(4)" title=""></el-step>
			    <el-step @click.native="jump(5)" title=""></el-step>
			    <el-step @click.native="jump(6)" title=""></el-step>
			    <el-step @click.native="jump(7)" title=""></el-step>
			  </el-steps>
			</div>
		</div>
		<img v-if="isShow" @click="goTop" class="tops" src="../../assets/images/abao/top.png" alt="" />		
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie.js'
	export default {
		name: 'homepage',
		data() {
			return {
				input1: '', //用户名
				input2: '', //密码
				checked: false,
				isRed1: false,
				isRed2: false,
				allData: '',
				loading: true,
				scrollTops: 0,
				isShow: false,	
				steps: 0,
			}
		},
		watch: {
			input1: {
				handler(val) {
					if(val != '') {
						this.isRed1 = false;
					}
				},
				deep: true
			},
			input2: {
				handler(val) {
					if(val != '') {
						this.isRed2 = false;
					}
				},
				deep: true
			},				
		},
		components: {

		},
		computed: {

		},		
		created() {		
			if(getCookie('abAppUserName')){
				this.input1 = getCookie('abAppUserName');
				this.checked = true;
			}
			this.scrolls();			
		},
		methods: {			
			//清空
			close(){
				this.input1 = '';
			},
			//登陆
			goLogin() {				
				if(this.input1 == '') {
					this.isRed1 = true;
					return;
				}
				if(this.input2 == '') {
					this.isRed2 = true;
					return;
				}
				if(this.checked){
					setCookie('abAppUserName',this.input1);	
				}else{
					if(getCookie('abAppUserName')){
						removeCookie('abAppUserName');
					}
				}
				//线上账号1458318  71475380
				//测试账号xueyou@qq.com  1234567890
				let obj = {};
				obj.username = this.input1;
				obj.password = this.input2;
				this.$axiosPost('/users/login.json', obj, true).then(res => {
					if (res.code === 200) {
						localStorage.setItem('abAppUserName', this.input1);
						setCookie('UID', res.data.id);
						setCookie('TOKEN', res.data.token);
						this.$router.push('/mine');
					} else if (res.code === 404) {
						this.$alert(res.message, '提示', {confirmButtonText: '确定'});
					}
				})
			},
			login(val) {
				if(val.keyCode === 13) {
					this.goLogin();
				}
			},
			//注册
			goRegister(){
				this.$router.push('/register');
			},
			//滚动条
			scrolls() {
				let that = this
				window.onscroll = function() {
					let top = document.body.scrollTop || document.documentElement.scrollTop;
					that.scrollTops = top;
					if(top > 1000) {
						that.isShow = true;
					} else {
						that.isShow = false;
					}
					if(top < 500){
						that.steps = 0;
					}else if(top >= 500 && top < 1200){
						that.steps = 1;
					}else if(top >= 1200 && top < 1700){
						that.steps = 2;
					}else if(top >= 1700 && top < 2200){
						that.steps = 3;
					}else if(top >= 2200 && top < 2800) {
						that.steps = 4;
					}else if(top >= 2800 && top < 4600){
						that.steps = 5;
					}else if(top >= 4600 && top < 5200){
						that.steps = 6;
					}else if(top > 5200) {
						that.steps = 7;
					}
				}
			},
			jump(id){
				if(id === 1){	
					document.documentElement.scrollTop = 500;					
				}else if(id === 2){
					document.documentElement.scrollTop = 1200;
				}else if(id === 3){
					document.documentElement.scrollTop = 1700;
				}else if(id === 4){
					document.documentElement.scrollTop = 2200;	
				}else if(id === 5){
					document.documentElement.scrollTop = 2800;
				}else if(id === 6){
					document.documentElement.scrollTop = 4600;
				}else if(id === 7){
					document.documentElement.scrollTop = 5530;
				}				
			},
			//顶部
			goTop(){
				let top1 = document.body.scrollTop;
				let top2 = document.documentElement.scrollTop;
				if(top1 > top2){
					document.body.scrollTop = 0;
				}else{
					document.documentElement.scrollTop = 0;	
				}				
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.homepage {
		height: 100%;
		background: #fff;				
		header {
			position: relative;		
			height: 100%;							
			.el-carousel {
			height: 100%;					
			background: url('../../assets/images/abao/mount.jpg') no-repeat center;
			background-size: 100% 100%;												
			.img1{
				background: url('../../assets/images/abao/i1background.png') no-repeat center;
				background-size: 100% 100%;
			}	
			.img2{
				background: url('../../assets/images/abao/i2background.png') no-repeat center;
				background-size: 100% 100%;
			}	
			.img3{
				background: url('../../assets/images/abao/i3background.png') no-repeat center;
				background-size: 100% 100%;
			}	
			.img4{
				background: url('../../assets/images/abao/i4background.png') no-repeat center;
				background-size: 100% 100%;
			}							
				.el-carousel__item {																							
					img {						
						width: 100%;
						height: 100%;						
					}
				}
			}
			.logins {
				width: 28.12%;
				height: 292px;
				position: absolute;
				right: 7.29%;
				bottom: 40%;
				transform: translateY(40%);
				background: #d9ebf9;
				z-index: 99;
				display: flex;
				align-items: center;
				justify-content: center;
				.login {
					width: 86.42%;
					height: 84.59%;
					text-align: left;
					.login_text {
						font-size: 20px;
						color: #45aaf3;
						padding: 0 0 12px 6px;
					}
					.login_inputs {
						width: 100%;
						height: 42.4%;
						border: 1px solid #9dc8ff;
						.input1 {
							width: 100%;
							height: 50%;
							position: relative;
							.people {
								position: absolute;
								left: 10px;
								top: 50%;
								transform: translateY(-50%);
								width: 22px;
								height: 22px;
							}
							input {
								width: 100%;
								height: 100%;
								padding: 0 12.86%;
								font-size: 20px;
								color: #000;
								letter-spacing: 1px;
								&::placeholder {
									color: #d1d1d1;
									letter-spacing: 2px;
								}
							}
							.close{
								position: absolute;
								right: 10px;
								top: 50%;
								transform: translateY(-50%);
								width: 22px;
								height: 22px;	
								cursor: pointer;
							}
							.red1 {
								border: 1px solid #FF0000;
							}
						}
						.input2 {
							border-top: 1px solid #9dc8ff;
						}
					}
					.login_options {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 12px;
						color: #3f4953;
						margin: 14px 0 18px 0;
						p {
							cursor: pointer;
							&:hover {
								text-decoration: underline;
							}
						}
					}
					.login_buttons {
						display: flex;
						justify-content: space-between;
						button {
							width: 38.28%;
							height: 50px;
							border-radius: 5px;
							font-size: 20px;
							letter-spacing: 2px;
							white-space: nowrap;
						}
						button:nth-of-type(1) {
							background: linear-gradient(to right, #6ceff4 0%, #5764f3 100%);
							background: -webkit-linear-gradient(to right, #6ceff4 0%, #5764f3 100%);
							color: #fff;
						}
						button:nth-of-type(2) {
							background: #fff;
							color: #000;
						}
					}
				}
			}
		}
		.content {
			margin-top: 84px;
			padding-bottom: 344px;
			.content_box {
				width: 82.29%;
				margin: 0 auto;					
				h1{
					font-size: 48px;
					color: #000;
					font-weight: 500;
				}
				h2{
					font-size: 48px;
					color: #000;
					font-weight: 500;
					margin: 72px 0 22px 0;
				}
				h6{
					font-size: 24px;
					color: #7c7c7c;
					font-weight: 400;
					white-space:normal;						
					margin: 20px 0 48px 0;
				}	
				.abo_introduce{										
					width: 88%;
					margin: 0 auto;					
					div{						
						display: flex;
						justify-content: space-around;
						img{
							width: 32%;
							height: 100%;
							background: linear-gradient(to bottom, #6fe8f3 0%, #5969f4 100%);
							background: -webkit-linear-gradient(to bottom, #6fe8f3 0%, #5969f4 100%);
						}
					}
				}
				.ranges{
					margin-top: 90px;
					div{
						display: flex;
						justify-content: space-around;
						p{
							display: flex;
							flex-direction: column;
							margin-top: 10px;
							span{
								font-size: 28px;
								color: #000;
								margin-top: 30px;
							}
						}
						p:nth-of-type(1){
							img{
								width: 125px;
								height: 120px;
							}							
						}
						p:nth-of-type(2){
							img{
								width: 103px;
								height: 120px;
							}							
						}
						p:nth-of-type(3){
							img{
								width: 77px;
								height: 120px;
							}							
						}
						p:nth-of-type(4){
							img{
								width: 114px;
								height: 120px;
							}							
						}
						p:nth-of-type(5){
							img{
								width: 110px;
								height: 120px;								
							}							
						}						
					}
				}	
				.process{
					margin-top: 100px;
					div{
						display: flex;
						justify-content: space-around;
						p{
							display: flex;
							flex-direction: column;														
							img{
								width: 200px;
								height: 200px;
								cursor: pointer;
								margin-bottom: 20px;
								&:hover{									
									transform: scale(1.1,1.1);
								}
							}
							span{								
								font-size: 30px;
								color: #000;
							}
						}															
					}
				}	
				.functions{
					display: flex;	
					justify-content: space-around;														
					.function1{						
						background: url('../../assets/images/abao/p4i1.jpg') no-repeat center;											
					}
					.function2{						
						background: url('../../assets/images/abao/p4i2.jpg') no-repeat center;						
					}
					.function3{						
						background: url('../../assets/images/abao/p4i3.jpg') no-repeat center;						
					}
					.function1,.function2,.function3{
						width: 347px;
						height: 415px;						
						background-size: 100% 100%; 
						border: 1px solid #a8d7e5;	
						box-shadow: 0 0 10px #a8d7e5;
						-webkit-box-shadow: 0 0 10px #a8d7e5;
						position: relative;
						cursor: pointer;
						&:hover{
							transform: scale(1.05,1.05);
							box-shadow: 0 0 12px #a8d7e5;
						}
						p{
							width: 85%;
							position: absolute;
							left: 50%;
							top: 65%;							
							transform: translateX(-50%);
							font-size: 26px;
							color: #000;
						}
					}
				}
			}		
			.activity{
				margin-top: 112px;
				h3{
					font-size: 34px;
					color: #000;
					font-weight: 400;
				}
				h1{
					font-size: 42px;
					color: #000;
					font-weight: 500;
					margin: 10px 0 24px 0;
				}
				>img{					
					width: 100%;
					height: 100%;
				}
			}	
			.four_subsidy{
				margin-top: 30px;
				display: flex;
				justify-content: space-around;
				.subsidy1{
					background: url('../../assets/images/abao/p5i1.jpg') no-repeat center;
				}
				.subsidy2{
					background: url('../../assets/images/abao/p5i2.jpg') no-repeat center;
				}
				.subsidy3{
					background: url('../../assets/images/abao/p5i3.jpg') no-repeat center;
				}
				.subsidy4{
					background: url('../../assets/images/abao/p5i4.jpg') no-repeat center;
				}				
				.subsidy1,.subsidy2,.subsidy3,.subsidy4{
					width: 310px;
					height: 450px;					
					background-size: 100% 100%;
					position: relative;					
					border: 1px solid #a8d7e5;	
					box-shadow: 0 0 10px #a8d7e5;
					-webkit-box-shadow: 0 0 10px #a8d7e5;
					cursor: pointer;
					&:hover{
						transform: scale(1.05,1.05);
						box-shadow: 0 0 12px #a8d7e5;
						-webkit-box-shadow: 0 0 10px #a8d7e5;
					}
					.text{
						width: 81%;						
						position: absolute;
						left: 50%;
						top: 65%;
						transform: translateX(-50%);						
						h6{
							font-size: 26px;
							color: #000;
							font-weight: 600;
							white-space: nowrap;
						}
						p{
							font-size: 20px;
							color: #000;
							text-align: left;
							margin-top: 12px;
						}
					}
				}
			}	
			.abao_info{
				position: relative;
				.backg{
					width: 100%;
					height: 100%;
				}
				.details{					
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					display: flex;					
					align-items: center;										
					.left{
						margin-right: -120px;
						margin-bottom: 50px;
						img{							
							width: 700px;
							height: 193.1px;
						}
						button{
							width: 146px;
							height: 42px;
							line-height: 42px;
							border-radius: 5px;
							background: #f4244c;
							font-size: 26px;
							color: #fff;
							position: relative;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-top: 20px;
							span{								
								transform: translateY(-50%);
								display: block;
								width: 10px;
								height: 10px;
								border-top: 1px solid #fff;
								border-right: 1px solid #fff;
								transform: rotate(45deg);
								margin-left: 4px;
							}
						}
					}
					>img{
						width: 580px;
						height: 301px;
						margin-left: -120px;
					}
				}				
			}	
			.all_users{
				width: 82.92%;
				margin: 80px auto 0 auto;							
				h6{
					font-size: 41px;
					color: #000;
					font-weight: 500;
				}
				.icons{
					display: flex;
					justify-content: space-around;
					margin: 65px 0 62px 0;
					img{
						width: 110px;
						height: 110px;
						cursor: pointer;
						&:hover{
							transform: scale(1.1,1.1);
						}
					}
				}
				.imgs{
					display: flex;
					justify-content: space-around;
					img{
						width: 255px;
						height: 433.5px;
						cursor: pointer;
						&:hover{
							transform: rotate(6deg);
						}
					}
				}
			}	
			.footer{
				height: 250px;
				background: #b1c2d2;
				margin-top: 96px;
				padding-top: 26px;
				h5{
					font-size: 22px;
					color: #fff;
					font-weight: 400;
				}
			}
		}
		.selects{			
			position: fixed;
			right: 5px;
			top: 50%;
			transform: translateY(-50%);
			z-index: 999;
			cursor: pointer;		
		}
		.tops{
			width: 50px;
			height: 50px;
			position: fixed;
			right: 30px;
			bottom: 40px;			
			z-index: 999;	
			cursor: pointer;					
		}
	}
</style>